<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./framework/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./framework/reset.css">
		<link rel="stylesheet" href="./framework/common.css">
		<link rel="stylesheet" href="./css/feedbackInfo.css">
		<title>东软环保公众监督系统-网格员端</title>
		<script src="js/base.js"></script>
	</head>
	<body>
		<!-- 总容器 -->
		<div class="wrapper">
			<div class="header-box">
				<header>
					<i class="fa fa-angle-left" onclick="history.go(-1)"></i>
					<p>反馈任务详细信息</p>
					<i></i>
				</header>
				<div class="top-ban"></div>
				<img src="./img/header.png">
			</div>

			<table border="1" class="info">
				<tr>
					<td>反馈用户</td>
					<td id="supervisor"></td>
				</tr>
				<tr>
					<td>网格</td>
					<td id="province_city"></td>
				</tr>
				<tr>
					<td>详细地址</td>
					<td id="address"></td>
				</tr>
				<tr>
					<td>预估等级</td>
					<td id="aqi"></td>
				</tr>
				<tr>
					<td>信息描述</td>
					<td id="aqi_info"></td>
				</tr>
			</table>

			<div class="actual">
				<table>
					<tr>
						<td>SO2浓度</td>
						<td><input id="so2" type="text" placeholder="请输入SO2浓度" onchange="soChange()"></td>
						<td>ug/m3</td>
						<td>
							<p id="so2state" style="background-color: aliceblue;"></p>
						</td>
					</tr>
					<tr>
						<td>CO浓度</td>
						<td><input id="co" type="text" placeholder="请输入CO浓度" onchange="coChange()"></td>
						<td>ug/m3</td>
						<td>
							<p id="costate" style="background-color: aliceblue;"></p>
						</td>
					</tr>
					<tr>
						<td>PM2.5</td>
						<td><input id="spm" type="text" placeholder="请输入PM2.5浓度" onchange="spmChange()">
						</td>
						<td>ug/m3</td>
						<td>
							<p id="spmstate" style="background-color: aliceblue;"></p>
						</td>
					</tr>
				</table>
				<h3 id="sumChange" style="background-color: aliceblue;"></h3>
				<div class="btn" onclick="edit()">提交实测数据</div>
			</div>

			<footer style="z-index: -1;">
				<img src="./img/bottom.png">
			</footer>
		</div>
	</body>
</html>
<script>
	let gmId = localStorage.getItem("gmId");
	let afId = localStorage.getItem("afId");
	let so2level = -1;
	let colevel = -1;
	let spmlevel = -1
	let maxaqiId = -1;
	let so2aqi = null;
	let coaqi = null;
	let spmaqi = null;

	function getfeedbackInfo() {
		let url = "http://localhost:8080/AqiFeedBack/feedbackInfo?afId=" + afId;
		rest(url, "get", null, function(r) {
			if (r.ok) {
				let feedBackInfo = r.data.feedBackInfo;
				document.getElementById("supervisor").innerHTML = feedBackInfo.realName + " " + feedBackInfo.telId;
				document.getElementById("province_city").innerHTML = feedBackInfo.provinceName + " " + feedBackInfo
					.cityName;
				document.getElementById("address").innerHTML = feedBackInfo.address;
				document.getElementById("aqi").innerHTML = feedBackInfo.chineseExplain + "级 " + feedBackInfo
					.aqiExplain;
				document.getElementById("aqi_info").innerHTML = feedBackInfo.information;
			}
		})
	}

	function soChange() {
		let so2 = document.getElementById("so2").value;
		let url = "http://localhost:8080/aqi/testAqi?type=1&input=" + so2;
		rest(url, "get", null, function(r) {
			if (r.ok) {
				so2aqi = r.data.aqi;
				so2level = so2aqi.aqiId;
				document.getElementById("so2state").innerHTML = so2aqi.chineseExplain
				document.getElementById("so2state").style.background = so2aqi.color;
				sumChange();
			}
		})
	}

	function coChange() {
		let co = document.getElementById("co").value;
		let url = "http://localhost:8080/aqi/testAqi?type=2&input=" + co;
		rest(url, "get", null, function(r) {
			if (r.ok) {
				coaqi = r.data.aqi;
				colevel = coaqi.aqiId;
				document.getElementById("costate").innerHTML = coaqi.chineseExplain
				document.getElementById("costate").style.background = coaqi.color;
				sumChange();
			}
		})
	}

	function spmChange() {
		let spm = document.getElementById("spm").value;
		let url = "http://localhost:8080/aqi/testAqi?type=3&input=" + spm;
		rest(url, "get", null, function(r) {
			if (r.ok) {
				spmaqi = r.data.aqi;
				spmlevel = spmaqi.aqiId;
				document.getElementById("spmstate").innerHTML = spmaqi.chineseExplain
				document.getElementById("spmstate").style.background = spmaqi.color;
				sumChange();
			}
		})
	}

	function sumChange() {
		if (so2level > colevel) {
			if (so2level > spmlevel) {
				document.getElementById("sumChange").innerHTML = "实测AQI等级：" + so2aqi.chineseExplain + "级 " + so2aqi
					.aqiExplain;
				maxaqiId = so2level;
				document.getElementById("sumChange").style.background = so2aqi.color;
			} else {
				document.getElementById("sumChange").innerHTML = "实测AQI等级：" + spmaqi.chineseExplain + "级 " + spmaqi
					.aqiExplain;
				maxaqiId = spmlevel;
				document.getElementById("sumChange").style.background = spmaqi.color;
			}
		} else {
			if (colevel > spmlevel) {
				document.getElementById("sumChange").innerHTML = "实测AQI等级：" + coaqi.chineseExplain + "级 " + coaqi
					.aqiExplain;
				maxaqiId = colevel;
				document.getElementById("sumChange").style.background = coaqi.color;
			} else {
				document.getElementById("sumChange").innerHTML = "实测AQI等级：" + spmaqi.chineseExplain + "级 " + spmaqi
					.aqiExplain;
				maxaqiId = spmlevel;
				document.getElementById("sumChange").style.background = spmaqi.color;
			}
		}
	}


	function edit() {
		let url = "http://localhost:8080/statistic/submitStatistic"
		let json = {};
		json.id = afId;
		json.so2Level = so2level;
		json.coLevel = colevel;
		json.spmLevel = spmlevel;
		json.so2Value = document.getElementById("so2").value;
		json.coValue = document.getElementById("co").value;
		json.spmValue = document.getElementById("spm").value;
		json.aqiId = maxaqiId;
		//json.gmId = gmId;

		rest(url, "put", json, function(r) {
			if (r.ok) {
				alert("提交成功")
			} else {
				alert("提交失败")
			}
		})
	}

	getfeedbackInfo();
</script>